<!--电池-->
<template>
    <div class="battery-box" :style="{width: width - 1 + 'px'}">
        <Progress :percent="num" hide-info :stroke-width="height"
        :status="num | battery_filter"
        :style="{width:width + 'px'}">
        </Progress>
        <i :style="{width: width/10 + 'px', height: height/3 + 'px', right: -width/10 + 'px', marginTop: -height/3/2 + 'px'}"></i>
    </div>
</template>
<script>
export default {
    props: ['num', 'width', 'height'],
    filters:{
        battery_filter(val){
            let state = ''
            state = val > 90 ? 'success' : val > 30 && val < 90 ? 'normal' : 'wrong'
            return state
        }
    }
}
</script>

<style lang="less" scoped>
.battery-box {
    position: relative;
    
    .ivu-progress{
        border: 1px solid #ddd;
        border-radius: 2px;
        padding: 1px;
        /deep/ .ivu-progress-inner{
            border-radius: 0;
        }
        /deep/ .ivu-progress-bg{
            border-radius: 2px;
        }
    }
    > i{
        display: block;
        position: absolute;
        background: #ddd;
        top: 50%;
        border-radius: 0 1px 1px 0;
    }
}
</style>
